<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			li {list-style: none;}
			a {text-decoration: none;}
			input{/*input去掉选中后的蓝色外框线*/outline: none;}
			html,body{font-size: calc(100vw/7.5);position: relative;}
			 @font-face {
				  font-family: 'iconfont';
				  src: url('font/iconfont.eot');
				  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
				      url('font/iconfont.woff2') format('woff2'),
				      url('font/iconfont.woff') format('woff'),
				      url('font/iconfont.ttf') format('truetype'),
				      url('font/iconfont.svg#iconfont') format('svg');
				}
				.iconfont {
				  font-family: "iconfont" !important;
				  font-size: 0.48rem;
				  font-style: normal;
				  -webkit-font-smoothing: antialiased;
				  -moz-osx-font-smoothing: grayscale;
				}
			 .title{width:7.5rem;height:0.89rem;background: #387ec2;border-bottom: 0.01rem solid #b1b1b1;font-size:0.31rem;color:white;
			  display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding: 0 0.54rem;}
		    .title img{width: 1.64rem;height: 0.58rem;}
		    .title .pic1{width:0.6rem;height:0.5rem;}
		    .nav{width: 100%;height:0.78rem;overflow-x:scroll;overflow-y: hidden;border-bottom: 0.01rem solid #e3e3e3;}
		    .nav ul{width: 200%;}
		    .nav ul li{height: 0.78rem;float: left;}
		    .nav ul li a{display: block;height: 0.78rem;width:1.8rem;text-align: center;line-height:0.78rem;font-size:0.3rem;color: black;box-sizing: border-box;}
		   .nav ul li a:hover{color:#387ec2;border-bottom: 0.05rem solid #387ec2;}
		   .comment{width: 100%;}
		   .comment li{width:100%;height: 1.72rem;border-bottom:0.01rem solid #e3e3e3;display: flex;font-size:0.3rem;
		     box-sizing: border-box;padding:0.2rem 0 0.22rem 0;}
		   .comment li img{width:0.85rem;height:0.85rem;margin-left:0.28rem;margin-right:0.21rem;}
		   .comment li div img{width:0.6rem;height:0.26rem;display: block;}
		   .comment li .img{display: flex;align-self: flex-end;margin-left: 0.65rem;}
		   .comment li h2{font-size:0.31rem;font-weight: normal;margin-bottom: 0.15rem;}
		   .comment li h3{font-size:0.26rem;font-weight: normal;margin-bottom: 0.12rem;}
		   .comment li h4{font-size:0.2rem;color:#929292;font-weight: normal;}
		    .foot{width:100%;height:1.1rem;border-top:0.01rem solid #b2b2b2;position: fixed;bottom:0;background: linear-gradient(to bottom right,#e7e3dd,#f9f9f9);}
			.foot span{display: block;}
			.foot ul{display: flex;justify-content: space-between;}
			.foot ul li{text-align: center;width:25%;}
			.foot ul li span{margin-bottom:0.02rem;margin-top:0.14rem;}
			.foot a{font-size:0.19rem;color:#929292;}
			.foot ul li:nth-child(3) a{color:#387ec2;}
			.foot a:hover{color:#387ec2;}
		</style>
	</head>
	<body>
		<div class="title">
				<span></span><span>驾考圈</span><img src="img/列表_03.jpg" class="pic1"/>
		</div>
		<div class="nav">
			<ul>
				<li><a href="">海定驾校</a></li>
				<li><a href="">最新</a></li>
				<li><a href="">学车趣事</a></li>
				<li><a href="">海定驾校</a></li>
				<li><a href="">最新</a></li>
				<li><a href="">学车趣事</a></li>
			</ul>
		</div>
		<div class="comment">
			<ul>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li><li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
				<li>
					<img src="img/个人中心_03.jpg"/>
					<div>
						<h2>郑虹美</h2>
						<h3>买科目二学时能买多少学时</h3>
						<h4>24分钟前  海定驾校</h4>
					</div>
					<div class="img">
						<a href=""><img src="img/列表_07.jpg"/></a>
						<a href=""><img src="img/列表_08.jpg"/></a>
					</div>
				</li>
			</ul>
		</div>
		<div class="foot">
				<ul>
					<li><a href="">
						<span class="iconfont">&#xe633;</span>
						<p>首页</p>
					    </a></li>
					    
					<li><a href="">
						<span class="iconfont">&#xe664;</span>
						<p>报名</p>
					    </a></li>
					<li><a href="">
						<span class="iconfont">&#xe6d3;</span>
						<p>驾考圈</p>
					    </a></li>
					<li><a href="">
						<span class="iconfont">&#xe61f;</span>
						<p>我的</p>
					    </a></li>
				</ul>
			</div>
	</body>
</html>
